<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sass颜色函数</title>
</head>
<body>

<div class="box">
    <button class="btn type1">按钮1</button>
    <button class="btn type2">按钮1</button>
    <button class="btn type3">按钮1</button>
    <button class="btn type4">按钮1</button>
</div>

<style lang="scss">
    $colors:#409eff, #67c23a, #e6a23c, #f56c6c, #909399  ;

    @for $i from 1 through length($colors) {
        .btn .type #{$i} {
            $ color: nth($ colors, $ i);
            background: $ color;
            color: #fff;

            &:hover {
                /*颜色变淡*/
                background: lighten($ color, 10%);
            }

            &:active {
                /*颜色变深*/
                background: darken($ color, 10%);
            }

            &:disabled {
                /*颜色变灰*/
                background: lighten($ color, 20%);
            }
        }
    }
</style>
</body>
</html>